<template>
  <div class="quality-check">
    <el-card shadow="never">
      <template #header>
        <div class="clearfix card-header">
          <span>质量检验管理</span>
          <div>
            <el-button type="danger" size="small" :disabled="!selectedIds.length" @click="handleBulkDelete">批量删除</el-button>
            <el-button type="primary" size="small" @click="showAddDialog">添加质量检验</el-button>
          </div>
        </div>
      </template>

      <el-table :data="qualityChecks" style="width: 100%" v-loading="loading" @selection-change="onSelectionChange">
        <el-table-column type="selection" width="50" />
        <el-table-column prop="batch_number" label="批次号" width="140" />
        <el-table-column prop="check_date" label="检验日期" width="140" />
        <el-table-column prop="inspector" label="检验员" width="120" />
        <el-table-column prop="alcohol_content" label="酒精度(%)" width="120" />
        <el-table-column prop="acidity" label="酸度" width="120" />
        <el-table-column prop="sugar_content" label="糖度" width="120" />
        <el-table-column prop="result" label="检验结果" width="120" />
        <el-table-column prop="notes" label="备注" />
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button size="small" type="primary" text @click="handleEdit(row)">修改</el-button>
            <el-button size="small" type="danger" text @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top:12px; display:flex; justify-content:flex-end;">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-size="size"
          :current-page="page"
          :page-sizes="[5,10,20,50]"
          @size-change="onSizeChange"
          @current-change="onPageChange"
        />
      </div>
    </el-card>

    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="560px">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
        <el-form-item label="批次号" prop="batch_number">
          <el-input v-model="form.batch_number" />
        </el-form-item>
        <el-form-item label="检验日期" prop="check_date">
          <el-date-picker v-model="form.check_date" type="date" placeholder="选择日期" style="width:100%" />
        </el-form-item>
        <el-form-item label="检验员" prop="inspector">
          <el-input v-model="form.inspector" />
        </el-form-item>
        <el-form-item label="酒精度(%)" prop="alcohol_content">
          <el-input-number v-model="form.alcohol_content" :min="0" :max="25" :precision="1" />
        </el-form-item>
        <el-form-item label="酸度" prop="acidity">
          <el-input-number v-model="form.acidity" :min="0" :precision="2" />
        </el-form-item>
        <el-form-item label="糖度" prop="sugar_content">
          <el-input-number v-model="form.sugar_content" :min="0" :precision="2" />
        </el-form-item>
        <el-form-item label="检验结果" prop="result">
          <el-select v-model="form.result">
            <el-option label="合格" value="合格" />
            <el-option label="不合格" value="不合格" />
            <el-option label="待复检" value="待复检" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="notes">
          <el-input type="textarea" v-model="form.notes" rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'QualityCheck',
  setup() {
    const qualityChecks = ref([])
    const loading = ref(false)
    const dialogVisible = ref(false)
    const dialogTitle = ref('添加质量检验')
    const isEdit = ref(false)
    const formRef = ref(null)
    const form = ref({ id: null, batch_number: '', check_date: '', inspector: '', alcohol_content: 0, acidity: 0, sugar_content: 0, result: '', notes: '' })

    const page = ref(1)
    const size = ref(10)
    const total = ref(0)
    const selectedIds = ref([])

    const rules = { batch_number: [{ required: true, message: '请输入批次号', trigger: 'blur' }], check_date: [{ required: true, message: '请选择日期', trigger: 'change' }], inspector: [{ required: true, message: '请输入检验员', trigger: 'blur' }], result: [{ required: true, message: '请选择检验结果', trigger: 'change' }] }

    const fetchList = async () => { loading.value = true; try { const res = await api.get('/quality-checks/', { params: { page: page.value, size: size.value } }); qualityChecks.value = res.items || []; total.value = res.total || 0 } finally { loading.value = false } }

    const onPageChange = (p) => { page.value = p; fetchList() }
    const onSizeChange = (s) => { size.value = s; page.value = 1; fetchList() }
    const onSelectionChange = (rows) => { selectedIds.value = rows.map(r => r.id) }

    const handleBulkDelete = async () => { if (!selectedIds.value.length) return; try { await ElMessageBox.confirm(`确认批量删除选中 ${selectedIds.value.length} 条记录吗？`, '提示', { type: 'warning' }); await api.post('/quality-checks/bulk-delete', selectedIds.value); ElMessage.success('批量删除成功'); selectedIds.value = []; fetchList() } catch (e) {} }

    const showAddDialog = () => { isEdit.value = false; dialogTitle.value = '添加质量检验'; form.value = { id: null, batch_number: '', check_date: '', inspector: '', alcohol_content: 0, acidity: 0, sugar_content: 0, result: '', notes: '' }; dialogVisible.value = true }
    const handleEdit = (row) => { isEdit.value = true; dialogTitle.value = '编辑质量检验'; form.value = { ...row }; dialogVisible.value = true }
    const handleDelete = async (row) => { try { await ElMessageBox.confirm('确认删除该记录吗？', '提示', { type: 'warning' }); await api.delete(`/quality-checks/${row.id}`); ElMessage.success('删除成功'); fetchList() } catch (e) {} }

    const submitForm = () => { formRef.value.validate(async (valid) => { if (!valid) return; try { if (isEdit.value) { await api.put(`/quality-checks/${form.value.id}`, form.value); ElMessage.success('更新成功') } else { await api.post('/quality-checks/', form.value); ElMessage.success('添加成功') } dialogVisible.value = false; fetchList() } catch (e) { ElMessage.error(isEdit.value ? '更新失败' : '添加失败') } }) }

    fetchList()
    return { qualityChecks, loading, dialogVisible, dialogTitle, form, rules, formRef, showAddDialog, handleEdit, handleDelete, submitForm, page, size, total, onPageChange, onSizeChange, selectedIds, onSelectionChange, handleBulkDelete }
  }
}
</script>

<style scoped>
.card-header { display: flex; justify-content: space-between; align-items: center; }
.quality-check { padding: 8px; }
</style>
